<template>
  <a-input-group compact>
    <a-form-item-rest>
      <a-select
        v-model:value="selectVal"
        style="width: 40%"
        :placeholder="props.selectPlaceholder"
        @change="handleUpdate"
        :disabled="props.disabled"
      >
        <a-select-option
          :value="item[props.fieldNames.value]"
          v-for="(item, index) in props.options"
          :key="item[props.fieldNames.key] || index"
          >{{ item[props.fieldNames.label] }}</a-select-option
        >
      </a-select>
    </a-form-item-rest>
    <a-input-group
      style="width: 60%"
      v-model:value="inputVal"
      :placeholder="props.ipnutPlaceholder"
      @change="handleUpdate"
      :disabled="props.disabled"
    />
  </a-input-group>
</template>

<script setup lang="ts">
  import { Select, SelectOption, InputGroup, Form } from 'ant-design-vue';

  import { ref, watch } from 'vue';
  const ASelect = Select;
  const ASelectOption = SelectOption;
  const AFormItemRest = Form.ItemRest;
  const AInputGroup = InputGroup;
  const emit = defineEmits(['change']);

  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
    ipnutPlaceholder: {
      type: String,
      default: '请输入',
    },
    selectPlaceholder: {
      type: String,
      default: '请选择',
    },
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Array,
      default: () => [undefined, ''],
    },
    fieldNames: {
      type: Object,
      default: () => {
        return { key: 'index', label: 'label', value: 'value' };
      },
    },
  });

  let selectVal = ref<string | undefined>(undefined);

  let inputVal = ref('');
  function handleUpdate() {
    emit('change', [selectVal.value, inputVal.value]);
  }
  watch(
    () => props.value,
    (v) => {
      inputVal.value = v.length >= 1 ? (v[1] as string) : '';
      selectVal.value = v.length > 0 ? (v[0] as string | undefined) : undefined;
    },
    { immediate: true },
  );
</script>
